<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能考勤管理系统</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="./config/vue.js"></script>
    <script src="./config/index.js"></script>
    <script src="./config/xlsx.full.min.js"></script>
    <script src="./config/moment.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f5f7fa;
            min-width: 1200px;
            overflow-y: scroll;
        }
        .app-container {
            min-height: 100vh;
            width: 100%;
        }
        .header {
            background: linear-gradient(90deg, #409EFF 0%, #3a8ee6 100%);
            padding: 15px 0;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            width: 100%;
            position: fixed;
            top: 0;
            z-index: 1000;
        }
        .header-title {
            color: #fff;
            margin: 0;
            font-size: 24px;
            text-align: center;
            letter-spacing: 2px;
        }
        .main-content {
            width: 50%;
            max-width: 1200px;
            min-width: 800px;
            margin: 80px auto 20px;
            padding: 20px;
        }
        .card {
            background: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
            margin-bottom: 20px;
            padding: 30px;
        }
        .action-group {
            margin: 20px 0;
            display: flex;
            gap: 15px;
            align-items: center;
        }
        .el-collapse-item__header {
            font-size: 16px;
            font-weight: bold;
            color: #303133;
            padding: 0 20px;
        }
        .el-collapse-item__content {
            padding: 20px 30px;
        }
        .el-form {
            width: 100%;
        }
        .el-form-item {
            margin-bottom: 25px;
        }
        .el-form-item__content {
            width: calc(100% - 150px);
        }
        .el-input-number {
            width: 180px;
        }
        .el-textarea__inner {
            min-height: 120px !important;
        }
        .success-alert {
            margin: 20px 0;
        }
        .divider {
            margin: 30px 0;
        }
        .time-select-group {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .time-select-group .el-time-select {
            width: 150px;
        }
    </style>
</head>
<body>
    <div id="app">
        <el-container class="app-container">
            <el-header class="header">
                <h1 class="header-title">智能考勤管理系统</h1>
            </el-header>
            
            <el-main class="main-content">
                <el-card class="card">
                    <el-collapse v-model="activeCollapse" accordion>
                        <el-collapse-item title="打卡表索引配置" name="config1">
                            <el-form label-width="150px" size="small">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="工号列索引">
                                            <el-input-number v-model="config.checkInTableConfig.empIdCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="姓名列索引">
                                            <el-input-number v-model="config.checkInTableConfig.nameCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="部门列索引">
                                            <el-input-number v-model="config.checkInTableConfig.departmentCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="考勤开始列索引">
                                            <el-input-number v-model="config.checkInTableConfig.startCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="表头开始行号">
                                            <el-input-number v-model="config.checkInTableConfig.headCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-collapse-item>

                        <el-collapse-item title="汇总表索引配置" name="config4">
                            <el-form label-width="150px" size="small">
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="工号列索引">
                                            <el-input-number v-model="config.SummaryTableConfig.empIdCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="姓名列索引">
                                            <el-input-number v-model="config.SummaryTableConfig.nameCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                                <el-row :gutter="20">
                                    <el-col :span="12">
                                        <el-form-item label="考勤开始列索引">
                                            <el-input-number v-model="config.SummaryTableConfig.startCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="12">
                                        <el-form-item label="表头开始行号">
                                            <el-input-number v-model="config.SummaryTableConfig.headCol" :min="0" controls-position="right"></el-input-number>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-collapse-item>

                        <el-collapse-item title="时间配置" name="config2">
                            <el-form label-width="150px" size="small">
                                <el-row :gutter="20">
                                    <el-col :span="24">
                                        <el-form-item label="每日工作时间">
                                            <div class="time-select-group">
                                                <el-time-select
                                                    v-model="config.checkInTableConfig.workStart"
                                                    :picker-options="{start: '00:00',step: '00:15',end: '24:00'}"
                                                    placeholder="开始时间">
                                                </el-time-select>
                                                <span>至</span>
                                                <el-time-select
                                                    v-model="config.checkInTableConfig.workEnd"
                                                    :picker-options="{start: '00:00',step: '00:15',end: '24:00'}"
                                                    placeholder="结束时间">
                                                </el-time-select>
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="午休时间">
                                            <div class="time-select-group">
                                                <el-time-select
                                                    v-model="config.checkInTableConfig.restStart"
                                                    :picker-options="{start: '00:00',step: '00:15',end: '24:00'}"
                                                    placeholder="开始时间">
                                                </el-time-select>
                                                <span>至</span>
                                                <el-time-select
                                                    v-model="config.checkInTableConfig.restEnd"
                                                    :picker-options="{start: '00:00',step: '00:15',end: '24:00'}"
                                                    placeholder="结束时间">
                                                </el-time-select>
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="晚休时间">
                                            <div class="time-select-group">
                                                <el-time-select
                                                    v-model="config.checkInTableConfig.dinnerStart"
                                                    :picker-options="{start: '00:00',step: '00:15',end: '24:00'}"
                                                    placeholder="开始时间">
                                                </el-time-select>
                                                <span>至</span>
                                                <el-time-select
                                                    v-model="config.checkInTableConfig.dinnerEnd"
                                                    :picker-options="{start: '00:00',step: '00:15',end: '24:00'}"
                                                    placeholder="结束时间">
                                                </el-time-select>
                                            </div>
                                        </el-form-item>
                                        <el-form-item label="允许迟到时间">
                                            <el-input-number v-model="config.checkInTableConfig.lateTime" :min="0" controls-position="right"></el-input-number>
                                            <span class="unit-text">分钟</span>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                        </el-collapse-item>

                        <el-collapse-item title="名单配置" name="config3">
                            <el-form label-width="150px" size="small">
                                <el-form-item label="管理员">
                                    <el-input type="textarea" v-model="config.checkInTableConfig.Staff" rows="4"></el-input>
                                </el-form-item>
                                <el-form-item label="部门划分">
                                    <el-input type="textarea" v-model="config.checkInTableConfig.departmentList" rows="4"></el-input>
                                </el-form-item>
                            </el-form>
                        </el-collapse-item>
                    </el-collapse>

                    <div class="action-group">
                        <el-button type="primary" @click="saveConfig" icon="el-icon-check">保存配置</el-button>
                        <el-button @click="resetConfig" icon="el-icon-refresh">恢复默认</el-button>
                    </div>
                </el-card>

                <el-card class="card">
                    <div class="action-group">
                        <el-upload
                            action=""
                            :auto-upload="false"
                            :on-change="handleFileChange"
                            :show-file-list="false">
                            <el-button type="primary" icon="el-icon-upload2">选择打卡文件</el-button>
                        </el-upload>
                        <el-button 
                            type="success" 
                            @click="processFile"
                            :disabled="!file"
                            icon="el-icon-s-operation">
                            开始处理打卡
                        </el-button>
                    </div>

                    <el-alert 
                        v-if="processedData"
                        title="处理完成！"
                        type="success"
                        :closable="false"
                        class="success-alert"
                        show-icon>
                        <el-button type="primary" @click="exportFile" icon="el-icon-download">下载处理后打卡表</el-button>
                    </el-alert>
                </el-card>

                <el-card class="card">
                    <div class="action-group">
                        <el-upload
                            action=""
                            :auto-upload="false"
                            :on-change="handleSummaryFileChange"
                            :show-file-list="false">
                            <el-button type="primary" icon="el-icon-upload2">选择汇总文件</el-button>
                        </el-upload>
                        <el-button 
                            type="success" 
                            @click="summaryfileProcessFile"
                            :disabled="!summaryfile"
                            icon="el-icon-s-operation">
                            开始处理汇总
                        </el-button>
                    </div>

                    <el-alert 
                        v-if="summaryTableData"
                        title="处理完成！"
                        type="success"
                        :closable="false"
                        class="success-alert"
                        show-icon>
                        <el-button type="primary" @click="exportAllFile" icon="el-icon-download">下载汇总表</el-button>
                    </el-alert>
                </el-card>
            </el-main>
        </el-container>
    </div>

    <script src="app.js"></script>
</body>
</html>